<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>品牌联盟</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<script type="text/javascript">
			document.write('<script src="../../js/mount.js?rd=?rd=' + Math.random() + '"><\/script>');
		</script>
		<script type="text/javascript">
			link(2);
		</script>
		<style type="text/css">
			.classfy-item__body{
				min-height: 100px;height:auto;
			}
			.mui-media-left{
			float: left;width: 75%;padding-bottom:30px;
			}
			.goods-name{
			font-size: 14px;line-height:21px;
			}
			.goods-model{
			color: #757575;font-size: 13px;margin-top: 6px;line-height:22px;
			}
			.goods-all-price{
			height: 26px;font-size: 15px;
			}
			.mui-media-right{
			float: right;width: 25%;text-align: right;
			}
			.goods-price{font-size: 13px;line-height:22px;color: #717071;
			}
			.goods-old-price{
			font-size: 13px;line-height:22px;margin-top: 4px;
			}
			.goods-num{
			margin-top: 4px;font-size: 13px;
			}
		</style>

	</head>
	<body id="app">
		<div class="bar-apply-state bg-danger" style="top: 0px;">
			<div class="state mg-0 mgl-15">
				<p><span style="top: 4px;" class="iconfont" :class="PayStatusClass"></span>
				{{PayStatusName}} 
				{{order.OrderStatusName}} 
				{{order.OrderReturnStatusName}} 
				{{order.CancelStatus==1?"部分取消":(order.CancelStatus==2?"全部取消":"")}}
				</p>
				<p class="pdl-33">
					<small>{{order.OrderTypeName}}</small>
					<small style="float: right;">{{order.OrderNo}}</small>
				</p>
			</div>
		</div>
		<div class="adress-bar" style="top:54px;position: relative;"></div>
		<div class="mui-content" style="padding-top: 14px !important;padding-bottom:50px">
			<div class="adress-detail-wrapper">
				<div class="adress-detail">
					<div class="adress-detail__title" style="font-size: 14px;color: #646464;">
						<span class="mui-icon mui-icon-location"></span>
						<strong>{{order.ReceviedName}}</strong>
						<strong class="adress-detail__body font-size-16">{{order.ReceviedPhone}}</strong>
					</div>
					<div class="adress-detail__body" style="font-size: 13px;color: #757575;">
						地址：{{order.ReceviedAddress}} 
						<template v-if="order.ReceviedZipCode">
							({{order.ReceviedZipCode}})
						</template>
					</div>
				</div>
			</div>
			<div class="goods">
				<ul class="mui-table-view mgb-6">
					<li class="mui-table-view-cell mui-media" v-if="item.Amount>0" v-for="item in items">
						<div class="classfy-item__img flexbox">
							<img class="mui-media-object mui-pull-left" :src="item.DefaultPicURL">
						</div>
						<div class="mui-media-body classfy-item__body">
							<div class="mui-media-left">
								<div class="goods-name">{{item.GoodsName}}</div>
								<div class="goods-model">
									型号: {{item.GoodsModel}}
									&nbsp;&nbsp;{{item.GoodsAttributesName}}: {{item.GoodsAttributesValueName}}
								</div>
								<div class="mui-media-price text-red goods-all-price">￥{{(item.SalePrice * item.Amount).toFixed(2)}}</div>
							</div>
							<div class="mui-media-right">
								<p class="goods-price">￥{{(item.SalePrice*1).toFixed(2)}}</p>
								<p class="goods-old-price" v-if="item.UnifiedPrice*1 > item.SalePrice*1" >
									<s>￥{{(item.UnifiedPrice*1).toFixed(2)}}</s>
								</p>
								<p class="goods-old-price" v-if="item.SaleDiscount>0">
									9.4折
								</p>
								<p class="goods-num">X {{item.Amount}}</p>
							</div>
						</div>
					</li>

					<li class="mui-table-view-cell">
						<label>促销优惠</label>
						<span class="mui-view-cell-val">
							￥ {{(order.PromotionAmount*1).toFixed(2)}}
						</span>
					</li>
					<li class="mui-table-view-cell">
						<label>优&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;惠</label>
						<span class="mui-view-cell-val">
							￥ {{(order.CouponAmount*1).toFixed(2)}}
						</span>
					</li>
					<li class="mui-table-view-cell">
						<label>订单金额（含优惠）</label>
						<span class="mui-view-cell-val text-red">
							￥ {{(order.totalSalePrice*1).toFixed(2)}}
						</span>
					</li>
				</ul>
				<ul class="mui-table-view mgb-6">
					<li class="mui-table-view-cell">
						<label>商家名称</label>
						<span class="mui-view-cell-val">
							{{order.OrderUserCompanyName}}
						</span>
					</li>
					<li class="mui-table-view-cell">
						<label>下单时间</label>
						<span class="mui-view-cell-val">
							{{order.CreateTime}}
						</span>
					</li>
					<li class="mui-table-view-cell">
						<label>完成时间  {{order.PayStatu}} {{order.OrderStatu}}</label>
						<span class="mui-view-cell-val">
							{{order.FinishTime}}
						</span>
					</li>
				</ul>
				<ul class="mui-table-view mgb-6">
					<li class="mui-table-view-cell">
						<label>发票抬头</label>
						<a  class="mui-view-cell-val text-blue">
							XXX解决问题
						</a>
					</li>
					<li class="mui-table-view-cell">
						<label>发票类型</label>
						<span class="mui-view-cell-val">
							个人发票
						</span>
					</li>
				</ul>
			</div>
			<div id="bottom_btn" class="mui-bar mui-bar-tab mui-text-right pdlr-15" >
				<a href="#btn-select" style="margin-left: 10px;" class="mui-btn mui-btn-danger mui-btn-outlined btn-confirm">取消订单</a>
				<button @tap="pay()" style="margin-left: 10px;" class="mui-btn mui-btn-danger" type="button">立即付款</button>
				<button @tap="confirmReceive()"style="margin-left: 10px;" class="mui-btn mui-btn-danger" type="button">确认收货</button>
			</div>

		</div>
		<!-- 底部弹窗 -->
		<div id="btn-select" class="box mui-popover mui-popover-action mui-popover-bottom">
			<div class="mui-popover-wrapper" style="height: 380px;">
				<div class="mui-popover-head">
					<h3 class="mui-popover-title"  style="font-weight:bold;">
						取消订单
						<span @tap="close" class="mui-icon mui-icon-closeempty icon-close" style="right: 8px;" ></span>
					</h3>
				</div>
				<div class="mui-popover-body">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll" >
							<div class="mui-popover-body" >
								<h5 style="font-weight:bold;">请选择取消订单的原因（必选）</h5>
								<div class="mui-input-group pdtb-10"  style="padding-bottom: 1px !important;">
									<div class="mui-input-row mui-radio noAfter">
										<label>我不想要了</label>
										<input name="reason-radio" style="right: 8px;"  type="radio" value="0">
									</div>
									<div class="mui-input-row mui-radio noAfter">
										<label>信息填写错误</label>
										<input name="reason-radio" style="right: 8px;" type="radio" value="1">
									</div>
									<div class="mui-input-row mui-radio noAfter">
										<label>其他原因</label>
										<input name="reason-radio" style="right: 8px;" type="radio" value="2">
									</div>
									<textarea id="cancelReason" style="display: none;" class="mgl-15" style="width: 6.83rem;margin-bottom: 0px;" name=""></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<a @tap="cancelOrder" class="mui-bar mui-bar-tab bg-red text-white bottom-fixed-block">提交</a>
		</div>
		
		<script type="text/javascript">
			script(2,['../../data/orderDetailModel.js','order-detail.js']);
		</script>
		
	</body>

</html>
